<template>
  <div class="auth-manage">
    <div class="header">
      <tabBtn
        :tabList="tabList"
        @change="tabChange"/>
    </div>
    <div class="auth-child-wrapper">
      <accountList v-if="currTabName === 'account'"/>
      <logList v-if="currTabName === 'log'"/>
    </div>
  </div>
</template>
<script>
import tabBtn from '@/public/tabBtn'
import logList from './components/logList'
import accountList from './components/accountList'
export default {
  components: {
    tabBtn,
    logList,
    accountList
  },
  data () {
    return {
      currTabName: '',
      tabList: [
        {label: '系统账号', type: 'account'},
        {label: '系统日志', type: 'log'}
      ]
    }
  },
  methods: {
    tabChange (type) {
      this.currTabName = type
    }
  }
}
</script>
<style lang="stylus" scoped>
.auth-manage
  height 100%
  background #fff
  border-radius 10px
  .header
    width 100%
    padded_box(border-box, 18px 20px)
  .auth-child-wrapper
    width 100%
    height calc(100% - 68px)
    padded_box(border-box, 0 20px 18px)
</style>
